<template>
    <section id="cicd-manager">

<el-tabs v-model="editableTabsValue" type="card"  @tab-remove="removeTab" >
    <el-tab-pane
            name = "default"
            label="项目列表"

    >
        <item-show @addNewItem="addTab(editableTabsValue)" @configItem="configItemEdit" @workspaceItem="openWorkspace"   @itemOutput="showOutput"></item-show>
    </el-tab-pane>
    <el-tab-pane
            v-for="(item, index) in editableTabs"
            :key="item.name"
            :label="item.title"
            :name="item.name"
            closable
    >
        <add-item @close_tab="closeTab(index)"></add-item>
    </el-tab-pane>
    <el-tab-pane
            v-for="(item, index) in configItemTabs"
            :key="item.name"
            :label="item.title"
            :name="item.name"

    >
        <config-item @close_tab="closeConfigTab(index)" :deployItem="item.deployItem"></config-item>
    </el-tab-pane>
    <el-tab-pane
            v-for="(item, index) in workspaceItemTabs"
            :key="item.name"
            :label="item.title"
            :name="item.name"

    >
        <workspace-item @close_tab="closeWorkspaceTab(index)" :deployItem="item.deployItem" @watchFile="watchFiles"></workspace-item>
    </el-tab-pane>

    <el-tab-pane
            v-for="(item, index) in outputItemTabs"
            :key="item.name"
            :label="item.title"
            :name="item.name"

    >
        <output-item @close_tab="closeOutputTab(index)" :deployItem="item.deployItem" ></output-item>
    </el-tab-pane>


    <el-tab-pane
            v-for="(f, index) in files"
            :key="f.name"
            :label="f.title"
            :name="f.name"


    >
        <file-watch @close_tab="closeWatchFileTab(index)" :filepath="f.filepath" ></file-watch>
    </el-tab-pane>


</el-tabs>


    </section>
</template>
<script>
    import itemsShow from '../../components/deploy/items'
    import addItem from  '../../components/deploy/newitem'
    import configItem from  '../../components/deploy/config'
    import workspaceItem from  '../../components/deploy/workspace'
    import outputItem from  '../../components/deploy/output'
    import fileWatch from  '../../components/deploy/file'
    export default {
        data() {
            return {
                editableTabsValue: 'default',
                editableTabs: [ ],
                tabIndex: 0,
                configItemTabs: [ ],
                workspaceItemTabs: [ ],
                outputItemTabs: [ ],
                files: [],
            }
        },
        methods: {
            addTab(targetName) {
                let newTabName = ++this.tabIndex + '';
                console.log(newTabName)
                this.editableTabs.push({
                    title: '新增项目',
                    name: newTabName,
                });
                this.editableTabsValue = newTabName;
            },
            removeTab(targetName) {
                let tabs = this.editableTabs;
                let activeName = this.editableTabsValue;
                console.log("debug",activeName,targetName)
                if (true) {
                    activeName = "default"
                } else if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    });
                }

                this.editableTabsValue = activeName;
                this.editableTabs = tabs.filter(tab => tab.name !== targetName);
            },
            closeTab(index) {
                //console.log(this.tabIndex)
                console.log("debug here")
                console.log(index)
                this.editableTabs.splice(index,1)  //给老子点赞
                this.removeTab()
            },
            closeConfigTab(index) {
                //console.log(this.tabIndex)
                console.log("debug here")
                console.log(index)
                this.configItemTabs.splice(index,1)  //给老子点赞
                this.removeTab()
            },
            closeWorkspaceTab(index) {
                //console.log(this.tabIndex)
                console.log("debug here")
                console.log(index)
                this.workspaceItemTabs.splice(index,1)  //给老子点赞
                this.removeTab()
            },
            closeOutputTab(index) {
                //console.log(this.tabIndex)
                console.log("debug here")
                console.log(index)
                this.outputItemTabs.splice(index,1)
                this.removeTab()
            },
            closeWatchFileTab(index) {
                //console.log(this.tabIndex)
                console.log("debug here")
                console.log(index)
                this.files.splice(index,1)
                this.removeTab()
            },
            configItemEdit(row) {
                let newTabName = ++this.tabIndex + '';
                console.log(newTabName)
                this.configItemTabs.push({
                    title: '配置管理',
                    name: newTabName,
                    deployItem: row,
                });
                this.editableTabsValue = newTabName;
            },
            openWorkspace(row) {
                let newTabName = ++this.tabIndex + '';
                console.log(newTabName)
                this.workspaceItemTabs.push({
                    title: '工作空间',
                    name: newTabName,
                    deployItem: row,
                });
                this.editableTabsValue = newTabName;
            },
            showOutput(row) {
                let newTabName = ++this.tabIndex + '';
                console.log(newTabName)
                this.outputItemTabs.push({
                    title: '控制台输出',
                    name: newTabName,
                    deployItem: row,
                });
                this.editableTabsValue = newTabName;
            },
            watchFiles(path) {
                let newTabName = ++this.tabIndex + '';
                console.log(newTabName)
                this.files.push({
                    title: '文件查看',
                    name: newTabName,
                    filepath: path,
                });
                this.editableTabsValue = newTabName;
            },

        },
        components: {
            itemShow: itemsShow,
            addItem: addItem,
            configItem: configItem,
            workspaceItem: workspaceItem,
            outputItem: outputItem,
            fileWatch: fileWatch,
        }
    }
</script>